import React, { Component } from 'react'
import ClinicContract from '../build/contracts/Clinic.json'
import getWeb3 from './utils/getWeb3'

import './css/oswald.css'
import './css/open-sans.css'
import './css/pure-min.css'
import './App.css'

var account1;

class App extends Component {
    constructor(props) {
        super(props)

        this.state = {
            doctors: [
                {
                    "name": "Rama",
                    "id": 100,
                    "docAdd": "0x02ADBD0FDDBaff1b9482FaE6284D937d02017b9a"
                },
                {
                    "name": "Nick",
                    "id": 101,
                    "docAdd": "0x9227Cae1CE79081295563210688963f81d390047"
                },
            ],
            web3: null
        }
    }

    componentWillMount() {
        // Get network provider and web3 instance.
        // See utils/getWeb3 for more info.

        getWeb3
            .then(results => {
                this.setState({
                    web3: results.web3
                })

                // Instantiate contract once web3 provided.
                this.instantiateContract()
            })
            .catch(() => {
                console.log('Error finding web3.')
            })
    }

    instantiateContract() {
        /*
         * SMART CONTRACT EXAMPLE
         *
         * Normally these functions would be called in the context of a
         * state management library, but for convenience I've placed them here.
         */

        const contract = require('truffle-contract')
        const clinicContract = contract(ClinicContract)
        clinicContract.setProvider(this.state.web3.currentProvider)

        // Declaring this for later so we can chain functions on SimpleStorage.

        this.state.web3.eth.getAccounts((error, accounts) => {
            account1 = accounts[0];
            console.log(account1);
        })
    }

    render() {
        return (
            <div className="App">
              <ul>
                  {
                      this.state.doctors.map((object) => {
                          console.log(object);
                          return (
                              <li key={object.id}>医生：{object.name}  <button onClick={() => {
                                  this.state.web3.eth.sendTransaction({from:account1, to: object.docAdd, value: this.state.web3.toWei(0.01,"ether")}, function(err, address){
                                      if (!err) {
                                          console.log(address);
                                          console.log('转账成功');
                                      }
                                  })
                              }}>转账</button></li>
                          )
                      })
                  }
              </ul>
              <div><button onClick={() => {
                  this.state.web3.eth.getTransaction('0x037d1eff30af93c2e0f613538685dc016f3919a59500e73d4ea9ebf37d9573bd', function (error, result) {
                      if (!error) {
                          console.log(result);
                      } else {
                          console.log(error);
                      }
                  })
              }}>查看病史记录：</button></div>
              <div><button onClick={() => {
                  this.state.web3.eth.getBalance(account1, function (error, result) {
                      if (!error) {
                          console.log(result.toString(10));
                      } else {
                          console.log(error);
                      }
                  });
              }}>查看账号余额：</button></div>
            </div>
        );
    }
}

export default App